<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="f" uri="http://www.springframework.org/tags/form" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>发布房间信息</title>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <link href="/landlord/css/put_all.css" rel="stylesheet"
          type="text/css"/>
    <style>

        #container {
            width: 100%;
            top: 3px;

        }

        .bg-box {
            position: relative;
        }

        .select_icon img {
            width: 100%;
            height: 100%;
        }


        #pickerBox {
            position: relative ;
            z-index: 10000;
            width: 100%;
            height: 30px;

        }

    </style>

    <script type="text/javascript">
        top.setTitle("位置");
    </script>

</head>

<body>
<div class="main-part-two">

    <%--@elvariable id="room" type="com.beiding.pojo.room.Room"--%>

        <f:form id="form" modelAttribute="room">

    <input type="hidden" name="_flowExecutionKey"
           value="${flowExecutionKey} }"/>

        <div class="form-info">

            <div id="pickerBox">
                <input id="pickerInput" class="input-st01" placeholder="搜索"/>
                <div id="poiInfo"></div>
            </div>

            <div id="container"></div>


            <div class="row">
                <div class="col-ui-12 label-txt">
                    <em>具体位置：</em>
                    <span class="txt-color-red">*</span>

                    <span class="error_message">
                        <f:errors path="location.detailedDescription"/>
                    </span>

                </div>

                <f:input type="hidden"  id="address" path="location.address"/>
                <f:input type="hidden"  id="latitude" path="location.latitude"/>
                <f:input type="hidden"  id="longitude" path="location.longitude"/>

                <div class="col-ui-12">
                <div class="bg-box">
                    <f:input type="text"  class="input-st01" path="location.detailedDescription" style="-webkit-appearance: none;"/>
                </div>
                 </div>
            </div>

            <div class="foot-box">
                <table>
                    <tr>
                        <td>
                            <input class="btn-st01" name="_eventId_onOk" id="next" type="submit" value="下一步">
                        </td>
                    </tr>
                </table>
            </div>

        </div>

        </f:form>

    </div>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.0/jquery.js"></script>

<script type="text/javascript">

    var div = document.getElementById("container");
    var w = div.clientWidth;
    div.style.height = w*0.9 + "px";
    var input = $("#pickerInput");
    var longitude = $("#longitude");
    var latitude = $("#latitude");
    var address = $("#address");


    input.click(function () {
        input.val('');
        address.val('');
    });

</script>


<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.11&key=eda44d70a2da926c4c4c1ff69320339a'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.11&key=eda44d70a2da926c4c4c1ff69320339a&plugin=AMap.ToolBar'></script>



<script type="text/javascript">
    var map = new AMap.Map('container', {
        zoom: 10
    });

    AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {

        var poiPicker = new PoiPicker({
            //city:'北京',
            input: 'pickerInput'
        });

        //初始化poiPicker
        poiPickerReady(poiPicker);
    });

    function poiPickerReady(poiPicker) {

        window.poiPicker = poiPicker;


        var marker = new AMap.Marker();

        var infoWindow = new AMap.InfoWindow({
            offset: new AMap.Pixel(0, -20)
        });

        poiPicker.on('poiPicked', function(poiResult) {

            var source = poiResult.source,
                poi = poiResult.item,
                info = {
                    source: source,
                    id: poi.id,
                    name: poi.name,
                    location: poi.location.toString(),
                    address: poi.address
                };

            marker.setMap(map);
            infoWindow.setMap(map);

            marker.setPosition(poi.location);
            infoWindow.setPosition(poi.location);

            var loc = poi.name;
            if (poi.address != "") {
                loc += "(" + poi.address + ")";
            }
            input.val(poi.name)

            infoWindow.setContent('<pre>' + loc + '</pre>');
            infoWindow.open(map, marker.getPosition());

            map.setCenter(marker.getPosition());
        });

        poiPicker.onCityReady(function() {
            poiPicker.suggest();
        });
    }
</script>



<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=eda44d70a2da926c4c4c1ff69320339a"></script>

<script type="text/javascript">


    var map = new AMap.Map('container', {
        resizeEnable: true
    });

    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
            convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,        //显示定位按钮，默认：true
            buttonPosition: 'RB',    //定位按钮停靠位置
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        map.addControl(geolocation);

            var pickerInput = $("#pickerInput");
            pickerInput.attr("disabled","disabled");

        geolocation.getCurrentPosition(function (position) {

            pickerInput.removeAttr("disabled");
        });

        /*
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        */
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });


    //解析定位错误信息
    function onError(data) {

        //data.message;

        alert("定位失败!");
    }



</script>

<%--拖拽选址--%>

<script type="text/javascript">
    AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
       /* var map = new AMap.Map('container', {
            zoom: 16,
            scrollWheel: false
        });
        */
        var positionPicker = new PositionPicker({
            mode: 'dragMap',
            map: map
        });

        positionPicker.on('success', function(positionResult) {


            let addressT = '';
            let aT = '';

            if (positionResult.regeocode.pois.length > 0) {
                addressT = positionResult.regeocode.pois[0].name+' '+positionResult.regeocode.pois[0].address;
                aT = positionResult.regeocode.pois[0].name + '\n' + positionResult.regeocode.pois[0].address;
            }

            input.val(addressT);
            address.val(aT);

            latitude.val(positionResult.position.P);

            longitude.val(positionResult.position.R);



        });
        positionPicker.on('fail', function(positionResult) {
            alert('无法准确定位')
        });

        positionPicker.start();
        map.panBy(0, 1);
    });
</script>



</body>
</html>